#vuex

***mapGetters和getters

#截取后端数据

#文字对齐

#文本溢出省略

  1. 文本溢出设置为省略一

  1. 文本溢出设置为省略二（多行）

  1. 文本溢出设置为省略三

#图片回显

file为二进制文件

#路径引用

****同一个文件夹中，

  1. 只要当其中一个组件直接属于该文件夹，跳一级，用 ./ 【图1】【图2】
  2. 当两个组件都分别属于各自的文件夹，共同属于某个总的文件，跳两级，用../ 【图3】

****不同文件夹且关系远，从同级文件夹名称开始写，用 @/ 【图4】

#类选择实现交互动效

#柱状图表数据排序

控制台获取的数据，console.log(this.totalData)，重新设置了数据属性。

#echarts的使用

  1. 常用引用方式

在接口中调取echarts方法，在方法中引入时：

this.addChart = $echarts.init(this.$refs.addChart); //addChart为图表元素id this.addChart.setOption({});

  1. 基础echarts引用方法：

直接在接口中引入echarts时：

const myChart = echarts.init(document.getElementById(“oneone”)); //oneone为图表元素id

const option = {};

#POST请求的格式（特殊：与GET类似）

#values报错

当出现以上情况，

  1. 可能是数据与表现形式不一致，比如数据显示在选择框中，但选择框无数据。
  2. 可能是v-model命名出问题，不能这样命名，后端接口获取的值不能直接赋予进入，需要再转换以下。 a.正常命名

b.异常命名

#表格中添加选择框编辑

~1.这是加载页面时初始化设置想要的数据格式，定义authOptons数组，用到表格render中赋值。方便传 递数据给后端时数据信息整理，容易拿去数据，便于转化为后端想要的数据格式。

~2. 这 是 选 择 框 中 的 下 拉 选 择 项 ， 在 data() 中 进 行 设 置 ， 定 义 typeAuthOptionsMap 对 象 。

~3.根据表格中表头type，选择框中显示不同的选择项，一共有三组选择项，与type一一对应。

~4.render函数：在表格中创建选择框编辑功能

~5.传递给后端的数据格式，新定义一个对象。

#对象与对象数组拼接组合

新定义的对象数组与原始数据组合在一起

#forEach和push

  1. 使用forEach遍历数组对象
  2. 将遍历的数组中的需要是数据提取出来，重新生成一个数组用push
  3. 可单独提取数据信息

  1. 也可以重新定义一个对象数组

#map的使用

重新定义一个对象数组

#数据排序：降序或者升序

#同行多个元素中部分右对齐

#隐藏表格某列

~例子：隐藏勾选项

filter意为过滤，过滤某一列数据。

显示表格选择项不同状态

#分支合并，git提交到主分支上

#拖拽

#表格中标签

#模糊查询

remoteTableHb (query) {

// const [url, httpConfig] = [

// “/api/freeIPA/getHbaseProjectInfo”,

// {

// params: {

// table: query,

// },

// },

// ];

const [url, httpConfig] = [

  • “/api/freeIPA/dataProjectList”,
  • {
  • params: {
  • name: query,
  • type: ‘’,
  • // page: this.currentPageNum,
  • // size: this.pageSize,
  • },
  • },

];

*this*.$http.get(url, httpConfig).then((response) => {

  • if (response.data.code === 200) {
  • console.log(response)
  • *this*.list = response.data.result;
  • }

});

  • if (query !== ‘’) {
  • *this*.loadingTableHb = true;
  • setTimeout(() => {
  • *this*.loadingTableHb = false;
  • // const list = this.list.map(item => {
  • // return {
  • // value: item,
  • // label: item
  • // };
  • // });
  • const list = *this*.list.map(item => {

•

return {

•

value: item.name,

•

label: item.name

•

};

•

});

•

*this*.optionsTableHb = list

•

// this.optionsTableHb = list.filter(item => {

•

// console.log(‘显示’)

•

// console.log(item)

•

// item.label.toLowerCase().indexOf(query.toLowerCase()) > -1

•

// });

•

// console.log(this.optionsTableHb)

•

}, 200);

  • } else {

•

*this*.optionsTableHb = [];

  • }

},

remoteTableHb (query) {

const [url, httpConfig] = [ “/api/freeIPA/dataProjectList”,

{

params: { name: query, type: ‘’,

},

},

];

this.$http.get(url, httpConfig).then((response) => { if (response.data.code === 200) {

console.log(response)

this.listTableHb = response.data.result;

}

});

if (query !== ‘’) { this.loadingTableHb = true; setTimeout(() => {

this.loadingTableHb = false;

const list = this.listTableHb.map(item => { return {

value: item.name, label: item.name

};

});

this.optionsTableHb = list

}, 200);

} else {

this.optionsTableHb = [];

}

},

remoteColumnHb (query) {

const table = this.list.table.toString() console.log(table)

const [url, httpConfig] = [ “/api/freeIPA/dataProjectList”,

{

params: { name: table, type: query,

},

},

];

this.$http.get(url, httpConfig).then((response) => { if (response.data.code === 200) {

console.log(response)

this.listColumnHb = response.data.result;

}

});

if (query !== ‘’) { this.loadingColumnHb = true; setTimeout(() => {

this.loadingColumnHb = false;

const list = this.listColumnHb.map(item => { return {

value: item.name, label: item.name

};

});

this.optionsColumnHb = list

}, 200);

} else {

this.optionsColumnHb = [];

}

},

#url路径直接跳转页面

  1. 初始化页面时，弹窗是没有参数的，此时需要自己定义弹窗的参数名。

在打开弹窗时定义参数。此时浏览器上会出现：

  1. 要直接从浏览器中输入url路径跳转，则需要在弹窗所在的vue页面初始化加载时判断设置。

  1. 如果要关闭弹窗，我则需要删除掉该参数，回到原来的大页面中，则需要在关闭弹窗时，重新设置 route中query的值。

#时间格式处理

// T和Z时间格式转换changeDate(oldDate) {

if(oldDate){

var dateee = new Date(oldDate).toJSON()

var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ‘ ‘).replace(/\.[\d]{3}Z/, ‘’)

return oldDate == ‘’ ? ‘’ : date

}

}

由A格式转为B格式

#render中自定义样式

#伪类：

排除掉scoped局部对全局的影响（子组件）。或者说时组件自带的类名的影响。用v-deep

学习链接是：深度作用选择器也可以用 /deep/.

~echarts相关

#echarts基本静态与动态图形显示

静态

  1. 在页面容器中写入，设置id

  1. 可能会在页面的script中引入特殊组件，引入特殊组件时，要npm i该组件。一般会在main.js中全局引入

  1. 在页面方法中引入，后写好图表的option，再setOption

或者直接在setOption中写

动态获取echarts

option写在data中，调取数据时只赋需要的数据给option

#echarts中X轴刻度对齐

#echarts页面初始化时图形变形解决方式

方法：异步请求，等原生echarts组件加载后，在异步请求方法，就避免了变形。

#echarts图形悬浮框定义

#echarts中设置X轴平行线为虚线，X轴样式也被覆盖解决方式

#echarts中柱状图颜色形状设置（左上右下）

#调整图表大小

~数据处理

#短横线转为驼峰

#删除对象中名称有短横线的数据

#对象转为自定义数组

#对象转为自定义对象

#屏幕自适应

echarts中pie图引导线为labelline

#设置滚动条

#开源依赖版本问题

-——-TypeError: Object(…) is not a function” found in

-———–报错中字段提示都是依赖包中字段，如clientHeight为开源代码中字段

重新安装对应版本

-–删除当前依赖

npm uninstall 安装包 （如：npm uninstall element-ui ）

-—下载指定版本

npm install –save 包名称@版本号 （如： npm install –save element-ui@2.15.8 ）